Agents Manager: open the floating chat on the right at default size on responsive undock by wellyshen · Pull Request #113361 · Automattic/wp-calypso

wellyshen · 2026-08-06T20:09:51Z

Fixes AI-1099

Proposed Changes

When the docked sidebar chat is forced into floating mode by the viewport narrowing below the desktop media query (the responsive undock), the floating chat now opens at the bottom-right corner — where the sidebar was — at the default size, instead of inheriting a stale side/position/size. That state is also persisted, so later opens agree with what the user last saw — and a drag or resize made while undocked takes back over until the next responsive undock.
Manual pop-outs ("Pop out sidebar") and fullscreen-gate undocks are untouched: they keep restoring the user's persisted position and size.
useAgentLayoutManager: onUndock now receives isResponsiveUndock: boolean, and portal children can read the same signal at render time via a new ResponsiveUndockContext (useResponsiveUndock() — the flag plus a per-undock counter); the hook README is updated.
New useFloatingPanelProps hook consolidates the previously duplicated floating-panel store wiring across agent-chat, agent-history, support-guide, and support-guides, and applies the responsive-undock seed overrides in one place.
The four AgentUI.Containers get a key (from useFloatingPanelProps) covering the dock state and the responsive-undock counter, so the panel remounts — and re-reads its mount-only position/size seeds — on dock/undock and on every responsive undock. Without it, the panel keeps the position it seeded at page load (the portal children reconcile in place across the dock switch).
AgentDock persists the new floating state in the onUndock handler: floatingPosition: 'right' (guarded to avoid redundant saves), cleared session freeDragPosition/floatingSize, and agenttic-ui's own agenttic-chat-position localStorage key (it takes precedence over the initialChatPosition prop at seed time).

Why are these changes being made?

Shrinking the viewport while the chat is docked made the floating panel pop up on the left side of the screen (its persisted/default position), breaking positional continuity with the sidebar the user was just looking at. Keeping it on the right, at a predictable size, makes the automatic switch easy to follow. See AI-1099.

Testing Instructions

Calypso

Check out this PR
Run yarn start-dashboard
Open the AI chat and dock it to the sidebar ("Move to sidebar"); optionally drag the floating chat to the left and resize it first, to make the effect obvious
When auto-switching the chat due to the sidebar RWD (narrow the window below 1200px), the chat will be moved to the right side and reset the size on the narrow screen — reloading while narrow keeps it on the right:

2026-08-07.4.13.48.mov

The changes won't impact manual chat switching — on a wide viewport, drag/resize the floating chat, dock it, then "Pop out sidebar": the chat reopens at the previous position and size:

2026-08-07.4.17.39.mov

Simple/Atomic (sandbox)

Run cd apps/agents-manager && yarn dev --sync
Sandbox widgets.wp.com (only widgets.wp.com needs sandboxing, not the site itself) and open any site's wp-admin
Repeat the checks above

Pre-merge Checklist

🤖 Generated with Claude Code

matticbot · 2026-08-06T20:11:02Z

WordPress.com

Dashboard Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-192286&env=dashboard
Calypso Live (/home) (direct link)

https://calypso.live/home?image=registry.a8c.com/calypso/app:build-192286

Automattic for Agencies

Dashboard Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-192286&env=dashboard-a4a
Automattic for Agencies Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-192286&env=a8c-for-agencies

Jetpack Cloud Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-192286&env=jetpack

Copilot

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds responsive-undock awareness to the agent layout flow and centralizes floating panel positioning/size props so the chat can re-seed to the right corner when undocked due to viewport changes.

Changes:

Introduces a ResponsiveUndockContext and passes a responsive-undock flag through the agent portal.
Adds useFloatingPanelProps to standardize mount-time seeding + persistence wiring for AgentUI.Container.
Updates components/tests to remount the container on dock/undock and validate responsive-undock behavior and persistence.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/agents-manager/src/hooks/use-floating-panel-props/index.ts	New hook for `AgentUI.Container` floating position/size props, with responsive-undock seeding.
packages/agents-manager/src/hooks/use-agent-layout-manager/responsive-undock-context.ts	New context + hook to expose “responsive undock” status to portal children.
packages/agents-manager/src/hooks/use-agent-layout-manager/index.tsx	Provides responsive-undock flag to portal children; extends `onUndock` callback with a boolean.
packages/agents-manager/src/hooks/use-agent-layout-manager/README.md	Documents the new `onUndock(isResponsiveUndock)` contract and the context usage.
packages/agents-manager/src/hooks/tests/use-floating-panel-props.test.tsx	Adds unit tests for the new floating panel props hook, including responsive-undock seeding.
packages/agents-manager/src/hooks/tests/use-agent-layout-manager.test.tsx	Adds tests verifying responsive-undock flag propagation and `onUndock(true/false)` semantics.
packages/agents-manager/src/constants.ts	Adds a seed constant intended to force right-corner placement via clamping.
packages/agents-manager/src/components/support-guides/index.tsx	Refactors to use `useFloatingPanelProps` and remounts container on dock/undock.
packages/agents-manager/src/components/support-guide/index.tsx	Refactors to use `useFloatingPanelProps` and remounts container on dock/undock.
packages/agents-manager/src/components/agent-history/index.tsx	Refactors to use `useFloatingPanelProps` and remounts container on dock/undock.
packages/agents-manager/src/components/agent-dock/index.tsx	On responsive undock, persists “right + default size” floating state (store + localStorage).
packages/agents-manager/src/components/agent-chat/index.tsx	Refactors to use `useFloatingPanelProps` and remounts container on dock/undock.
packages/agents-manager/src/components/tests/agent-dock.test.tsx	Adds coverage for responsive-undock persistence behavior in `AgentDock`.
packages/agents-manager/src/components/tests/agent-chat.test.tsx	Adds coverage to ensure container remount happens only when dock state changes.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.

Suppressed comments (3)

packages/agents-manager/src/hooks/use-agent-layout-manager/index.tsx:73

The API uses both isResponsiveUndock (callback param/docs) and useIsResponsiveUndocked / isResponsiveUndocked (context + internal variable). Standardizing on one name (e.g. isResponsiveUndocked everywhere) would reduce confusion for consumers and keep terminology consistent across the hook, context, and README.

	/** `isResponsiveUndock` is true when the undock was forced by the viewport narrowing below `desktopMediaQuery`. */
	onUndock?: ( isResponsiveUndock: boolean ) => void;

packages/agents-manager/src/components/agent-dock/index.tsx:167

On responsive undock, setFreeDragPosition( null ) and setFloatingSize( null ) are dispatched unconditionally. If the persisted values are already null, this can trigger unnecessary store updates and rerenders. Consider selecting the current freeDragPosition/floatingSize here and only dispatching when a change is actually needed (similar to the existing guard for floatingPosition).

			if ( floatingPosition !== 'right' ) {
				setFloatingPosition( 'right' );
			}

			setFreeDragPosition( null );
			setFloatingSize( null );

packages/agents-manager/src/components/tests/agent-dock.test.tsx:475

This test hardcodes the storage key string even though the production code now defines AGENTTIC_CHAT_POSITION_STORAGE_KEY. Import and use the constant in the test to keep it aligned with future key changes and avoid duplicated literals.

		expect( localStorage.getItem( 'agenttic-chat-position' ) ).toBe( 'right' );

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated no new comments.

johngodley

This generally works as described. I've left a couple of comments for specific code. I'll approve based on these are probably small changes, but I can take another look too.

Also, I'm not sure if this is intended behaviour or a problem:

Start with agent in sidebar
Reduce width to docked
Move agent to top left
Expand width to move back to sidebar
Reduce width to docked. It's now on the bottom right again

johngodley · 2026-08-07T09:57:15Z

-	const canDock = useCanDock( { desktopMediaQuery } );
+	const { canDock, isDesktop } = useCanDock( { desktopMediaQuery } );
 	const shouldRenderSidebar = canDock && isDocked;
+	const isResponsiveUndocked = !! isDocked && ! isDesktop;


I think this is causing a problem when the component is remounted.

Start with agent in sidebar

Reduce width to make it docked

Move to left, and resize to a large width and height

Press the 'View History' button (so changing route)

Agent is now docked to the right and small

johngodley · 2026-08-07T10:03:08Z

-			defaultSize={ floatingSize ?? undefined }
-			onResizeEnd={ setFloatingSize }
+			// Remount on dock/undock so the mount-only seed props re-apply.
+			key={ isDocked ? 'embedded' : 'floating' }


My agent says there could be a problem with this key in Zendesk as it's based on undefined data. I don't know if this is still used or how to confirm it.

A user is chatting with a Happiness Engineer through Zendesk in the docked sidebar and has typed a half-finished message. They drag the browser window narrower past the desktop breakpoint (or click "Move to sidebar" / the dock toggle). shouldRenderSidebar flips, the key goes 'embedded' → 'floating', React unmounts and remounts the container, and the internal input state reinitializes to ''. The typed message is gone with no way to recover it.

…nsive undock When the docked sidebar is forced into floating mode by the viewport narrowing below the desktop media query, the chat now opens at the right corner (where the sidebar was) at the default size, and persists that as the new floating state. Manual pop-outs and fullscreen-gate undocks keep restoring the user's persisted position and size. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

github-actions · 2026-08-07T13:46:54Z

Looks like one of the E2E tests has failed.

You can fix them following these steps:

Check out this branch locally:
```
gh pr checkout 113361
```
Start Claude Code in the repo:
```
claude
```
Run the /fix-e2e-tests skill, passing this PR number:
```
/fix-e2e-tests 113361
```

The right-corner seed now applies only until the user repositions the responsive-undocked chat — a drag or resize survives route changes and close/reopen instead of being reset on every remount. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

The layout manager now counts responsive undocks and the floating panels key on that count, so the remount that re-applies the right-corner seed happens on every switch — not only the first — while drags/resizes made in between are still kept. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

wellyshen · 2026-08-07T15:23:39Z

@johngodley Thanks for the review. These regressions are real — the new key remounts <AgentUI.Container> and wipes its internal state. It only exists because agenttic-ui reads position/size seeds at mount, so everything here is a workaround for that.

Closing this PR — the proper fix is on the agenttic-ui side.

wellyshen self-assigned this Aug 6, 2026

wellyshen marked this pull request as ready for review August 6, 2026 20:14

Copilot AI review requested due to automatic review settings August 6, 2026 20:14

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 6, 2026

wellyshen requested a review from a team August 6, 2026 20:20

wellyshen force-pushed the ai-1099-agenttic-ui-floating-panel-should-stay-on-the-right-when branch 2 times, most recently from 67cec9c to f1267d8 Compare August 6, 2026 20:32

Copilot AI reviewed Aug 6, 2026

View reviewed changes

wellyshen requested a review from Copilot August 6, 2026 21:31

Copilot AI reviewed Aug 6, 2026

View reviewed changes

Comment thread packages/agents-manager/src/components/__tests__/agent-chat.test.tsx

wellyshen requested a review from Copilot August 6, 2026 22:50

Copilot started reviewing on behalf of wellyshen August 6, 2026 22:50 View session

Copilot AI reviewed Aug 6, 2026

View reviewed changes

johngodley approved these changes Aug 7, 2026

View reviewed changes

Welly Shen and others added 3 commits August 7, 2026 21:33

Freeze the corner seed and centralize the agenttic position storage key

a5204d6

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Simplify comments

eed0274

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

wellyshen force-pushed the ai-1099-agenttic-ui-floating-panel-should-stay-on-the-right-when branch from abe28a7 to eed0274 Compare August 7, 2026 13:36

Welly Shen and others added 2 commits August 7, 2026 22:02

wellyshen closed this Aug 7, 2026

github-actions Bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 7, 2026

Navigation Menu

Uh oh!

Agents Manager: open the floating chat on the right at default size on responsive undock - #113361

Agents Manager: open the floating chat on the right at default size on responsive undock#113361
wellyshen wants to merge 5 commits into
trunkfrom
ai-1099-agenttic-ui-floating-panel-should-stay-on-the-right-when

wellyshen commented Aug 6, 2026 •

edited

Loading

Uh oh!

matticbot commented Aug 6, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

johngodley left a comment

Uh oh!

johngodley Aug 7, 2026

Uh oh!

johngodley Aug 7, 2026

Uh oh!

github-actions Bot commented Aug 7, 2026

Uh oh!

wellyshen commented Aug 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

wellyshen commented Aug 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Calypso

Simple/Atomic (sandbox)

Pre-merge Checklist

Uh oh!

matticbot commented Aug 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

johngodley left a comment

Choose a reason for hiding this comment

Uh oh!

johngodley Aug 7, 2026

Choose a reason for hiding this comment

Uh oh!

johngodley Aug 7, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Aug 7, 2026

Uh oh!

wellyshen commented Aug 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wellyshen commented Aug 6, 2026 •

edited

Loading

matticbot commented Aug 6, 2026 •

edited

Loading